アロー関数 arrow function

何が嬉しいの？利点は?

解決した課題

特徴

用途

code:arrow-function-this.js

class LikeCounter {

constructor(){

//thisは、親のclassオブジェクト LikeCounter

this.clickedCounter=0;

const button=document.querySelector('.button');

const clickedCountText=document.querySelector('.clickedCountText')

//not arrow

button.addEventListener('click',function(){

this.clickedCount+=1; //正しく動作しない NaN

clickedCountText.textContent=this.clickedCount;

});

//arrow

button.addEventListener('click',()=>{

this.clickedCount+=1; // LikeCounter.clickedCount

clickedCountText.textContent=this.clickedCount;

});

}

}

new LikeCounter();

参考